<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>搜索结果</title>
	<style>
        /*页头部分 勿改*/
        /*设置div背景色为white*/
        /*以下部分和页脚部分统一*/
        html{
            height:100%;
            margin:0;
        }
        body{
            height:100%;
            margin: 0;
            background-color: #f9f9f9;
        }
        a{text-decoration:none}
        a:link {color:black;}
        a:visited {color:black;}
        .banner {
            z-index:99999;
            width:100%;
            height:70px;
            top:0;
            left:0;
            position: fixed;
            overflow: hidden;
            background: #fff;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
            filter:alpha(Opacity=50);
            opacity: 0.95;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: absolute;
            top: 15px;
            left: 182px;
            height: 35px;
            width: 224px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
        }
        #search {
            float: left;
            margin-top: 1.4px;
            width: 185px;
            height: 30px;
            border: 0;
            background-color: transparent;
            font: 13px 微软雅黑;
        }
        #btnLeft{
            margin-left: 30px;
            width: 235px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #searchicon{
            float: right;
            margin-top: 3.5px;
            width: 28px;
            height: 28px;
        }
        #hpBtn{
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
            float: right;
        }
        #ppBtn{
            margin-right: 7px;
            float: right;
            width: 112px;
            height: 30px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
        }
        /*页脚*/
        footer{
            position: relative;
            bottom: 0;
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }
        #footer{
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #footText{
            height: 20px;
            margin: 5px auto;
        }
        .container{
            min-height: 100%;
        }
        /*主体部分*/
        .main{
             margin:90px auto;
             width:1076px;
             height:auto;
        }
		.left{
            float:left;
            margin-top:20px;
            width:740px;
            height:auto;
		}
        .userResult{
            width:740px;
            height:auto;
            border: 1px solid #999999;
        }
        #userInfo{
            margin-top:20px;
            margin-left:20px;
            height:auto;

        }
        #userImage{
            border: 5px solid aliceblue;
            border-radius:50%;
        }
        #userText{
            width:600px;
            margin-left:135px;
            margin-top:-80px;
        }
        #userName{
            font: normal 18px 微软雅黑 ;
        }
        #signature{
            font: normal 15px 微软雅黑 ;
        }
        .postsResult{
            width:740px;
            height:auto;
            margin-top: 20px;
            border: 1px solid #999999;
        }
        .passage{
            margin-top: 10px;
            margin-left: 20px;
            width:100%;
        }
        #passageName{
            position: relative;
            top:18px;
            font: normal 18px 微软雅黑 ;
        }
        #date{
            position: relative;
            float:right;
            top:10px;
            left:-45px;
            font: normal 13px 微软雅黑 ;
        }
        #passageMain{
            position: relative;
            top:5px;
            word-wrap: break-word;
            word-break: normal;
            width:560px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            font: normal 15px 微软雅黑 ;
        }
        .media-box{
            position: relative;
            top:0;
            width: 340px;
            height:120px;
        }
        .image1,.image2,.image3 img{
            width: 110px;
            height: 110px;
            background: black;
        }
        .image1{
            position:relative;
        }
        .image2{
            position:relative;
            top: -110px;
            left:113px;
        }
        .image3{
            position:relative;
            top: -220px;
            left:226px;
        }
        hr{
            width:95%;
        }
		.right {
            float: right;
            margin-top: 20px;
            width: 320px;
            height: 440px;
            background: white;
        }
		.personBlock{
            float: right;
            width: 320px;
            height: 440px;
            border: 1px solid #999999;
            border-radius: 3px;
            text-align: center;
        }
        #avatar{
            border: 5px solid aliceblue;
            border-radius:50%;
            width: 120px;
            height: 120px;
        }
        #avatarDiv{
            margin-top: 40px;
            text-align: center;
        }
        .personFont{
            font: normal 18px 微软雅黑;
        }
        #post{
            text-align: center;
            margin-top: 50px;
            width: 120px;
            height: 40px;
            border: 1px solid #999999;
            border-radius: 3px;
            background-color: white;
            font: 15px 微软雅黑;
            color: #666666;
        }
</style>

</head>
<body>
    <div class="container">
        <div class="banner">
            <img src="logologin.png" id="logo"/>
            <div class="searchDiv">
                <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
                <a href="https://www.baidu.com"><img src="搜索.png" id="searchicon" /></a>
            </div>
            <div id="btnLeft">
                <input type="button" name="homepage" id="hpBtn" value="个人中心">
                <input type="button" name="homepage" id="ppBtn" value="首页">
            </div>
        </div>
        <div class="main">
            <div class="left">
                 <!--搜索结果用户部分-->
                <div class="userResult">
                    <!--下为单个用户的信息实例 点击头像或用户名跳到个人主页-->
                    <div id="userInfo">
                        <div id="image">
                            <a href=""><img src="头像.png" id="userImage" alt="" width="100" height="100" ></a>
                        </div>
                        <div id="userText">
                            <a id="userName" href=""><b>用户名</b></a>
                            <p id="signature">个性签名个性签名个性签名个性签名</p>
                        </div><br>
                    </div>



                </div>
                <!--搜索结果帖子部分-->
                <div class="postsResult">
                    <!--下为单个帖子的信息实例 点击标题跳到帖子主页-->
                    <div class="passage">
                        <a href=""  id="passageName">XXXXXXXXXXXXXXXXXXX</a>
                        <p id="date">XXX-XX-XX 11:11:11</p>
                        <!--正文三行缩略-->
                        <p id="passageMain">
                            AAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBCCCCCC
                        </p>
                        <div class="media-box">
                            <div class=image1><img src="" ></div>
                            <div class=image2><img src="" ></div>
                            <div class=image3><img src="" ></div>
                        </div>
                    </div>
                    <!--帖子之间的分割线-->
                    <hr>
                </div>
            </div>

            <div class="right">
                <div class="personBlock">
                    <div id="avatarDiv">
                        <img src="头像示例.jpg" id="avatar">
                    </div>
                    <div>
                        <br>
                        <t class="personFont">这是一个用户名</t><br><br>
                        <t class="personFont">粉丝：</t><t  class="personFont" id="fansNum">33</t><br>
                        <t class="personFont">关注：</t><t class="personFont" id="followNum" >33</t>
                    </div>
                    <input type="button" name="post" id="post" value="发帖子"><br>
                </div>
            </div>
        
        </div>
    </div>
    <footer>
        <div id="footer">
            <div id="footText">
                <img src="giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
                <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
                <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
                <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
            </div>
        </div>
    </footer>

</body>
</html>
